<template>
  <el-row :gutter="0">
    <el-col :span="14">
      <el-image :src="loginImages" fit="fill" style="margin-top: 100px;width: 900px;height: 450px;" >
      </el-image>
    </el-col>
    <el-col :span="10">

      <div class="loginForm">
        <h2 style="text-align: center;">登录</h2>
        <el-form
          size="large"
          ref="formRef"
          :model="dynamicValidateForm"
          label-width="120px"
          class="demo-dynamic"
          :hide-required-asterisk="true"

        >
          <!--        账号-->
          <el-form-item
            prop="userAccount"
            style="width: 500px;"
            :rules="[
            {
              required: true,
              message: '必填',
              trigger: 'blur',
            },
            {
              max:10,
              min:8,
              message: '账号长度为8~10位',
              trigger: 'blur',
            }
      ]"
          >
            <el-input
              v-model="dynamicValidateForm.userAccount"
              placeholder="请输入账号">
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!--        密码-->
          <el-form-item
            prop="password"
            style="width: 500px;"
            :rules="[
        {
          required: true,
          message: '必填',
          trigger: 'blur',
        },
        {
          max: 15,
          min: 8,
          message: '密码长度为8~15位',
          trigger: 'blur',
         }
      ]"
          >
            <el-input
              v-model="dynamicValidateForm.password"
              :show-password="true"
              placeholder="请输入密码"

            >
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)" style="width:390px;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-col>

  </el-row>

</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { computed, reactive, ref, toRaw, unref } from "vue";
import { login } from "@/utils/api";
import { useStore } from "vuex";
import loginImages from "@/assets/111.jpg"
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const formRef = ref();
const store = useStore();
let dynamicValidateForm = reactive({
  userAccount: "",
  password: ""
});

const c = computed(() => store.state.aaa.userInfo.count);
const submitForm = (formEl) => {

  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      const res = await login(dynamicValidateForm);
      sessionStorage.setItem("user", JSON.stringify(res.data));
      // sessionStorage.setItem("token",res.data.token)
      if (res.data.roler === "admin"){
        ElMessage({
          type: "success",
          message: "管理登录"
        });
        store.dispatch("user/increment", res.data);
        router.push({
          path: "/home/data"
        });
      }else {
        ElMessage({
          type: "success",
          message: "医生登录"
        });
        store.dispatch("user/increment", res.data);
        router.push({
          path: "/home/dReg"
        });
      }

    }
  });
};

</script>


<style>
.loginForm {
  margin-top: 150px;;
  width: 600px;
}

.el-form-item {
  margin-bottom: 25px;
}

</style>
